/* Bloqueo del scroll del cuerpo cuando el carrito está abierto */
body.cart-open {
    overflow: hidden;
}

.cart-sidebar {
    position: fixed;
    right: -400px; /* Lo esconde fuera de la pantalla a la derecha */
    top: 0;
    width: 350px; /* Ancho del panel */
    height: 100vh;
    background: white;
    box-shadow: -5px 0 25px rgba(0,0,0,0.15);
    z-index: 3000;
    transition: right 0.3s ease-in-out; /* Animación suave */
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

/* Área de los productos: Se vuelve desplazable */
#cart-items {
    flex: 1;            /* Toma todo el espacio disponible entre el título y el total */
    overflow-y: auto;   /* Habilita la barra de desplazamiento si hay muchos productos */
    margin-top: 20px;
    padding-right: 10px; /* Espacio para que la barra no tape el botón de eliminar */
    list-style: none;
}

/* Estilo opcional para que la barra de desplazamiento se vea más limpia */
#cart-items::-webkit-scrollbar {
    width: 6px;
}
#cart-items::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 10px;
}

.cart-sidebar.open { right: 0; }

/* Ajuste para móviles: que ocupe casi toda la pantalla */
@media (max-width: 480px) {
    .cart-sidebar {
        width: 85%;
        right: -100%;
    }
    .cart-sidebar.open {
        right: 0;
    }
}